import React from './react';//核心库
import ReactDOM from './react-dom';//DOM渲染库
/**
 * 你不能在函数组件使用ref属性，因为他们没有实例
 * 执行完了就销毁 
 * 如何给函数组件加ref    forwardRef 转发ref
 * ref 转发是一项将ref 自动的通过组件传递到子组件的技巧
 * refs转发允许某些组件接收ref 并向下传递
 * React.useRef();
 */
function TextInput(props, ref) {
  //input在创建真实DOM的时候会给ref.current= 真实的INPUT元素
  return <input ref={ref} />
}
const ForWardTextInput = React.forwardRef(TextInput);

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }
  getFocus = () => {
    this.textInput.current.focus();
    this.textInput.current.value = "focus";
  }
  render() {
    return (
      <div>
        <ForWardTextInput ref={this.textInput} />
        <button onClick={this.getFocus}>获取焦点</button>
      </div>
    )
  }
}
/**
 *Function components cannot be given refs.
 *Attempts to access this ref will fail. 
 *Did you mean to use React.forwardRef()?
 */
/* function TextInput(props) {
  return <input />
} */
/* class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this.input = React.createRef();
  }
  getFocus = () => {
    //this.input.current指向input的真实DOM元素 focus是是一个原生让DOM结点获取焦点的方法
    this.input.current.focus();
    this.input.current.value = 'focus';
  }
  render() {
    return <input ref={this.input} />
  }
} */

ReactDOM.render(<Form />, document.getElementById('root'));